.container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.hide{
	display: none;
}

.head-wrap {
	background: #fff;
	padding: 20rpx 30rpx;
	
	.search-wrap {
		width: 100%;
		height: 80rpx;
		border-radius: 80rpx;
		background: #f5f5f5;
		padding-left: 80rpx;
		box-sizing: border-box;
		position: relative;
		
		.iconfont{
			position: absolute;
			top: 50%;
			left: 20rpx;
			transform: translateY(-50%);
			font-size: 40rpx;
			color: #999;
		}
		
		.input,.placeholder{
			box-sizing: border-box;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #ccc;
		}
		.placeholder{
			font-weight: 600;
		}
	}
	
	.anchor-list{
		margin-top: 20rpx;
		
		.iconfont{
			color: $base-color;
			font-size: 36rpx;
			margin-right: 10rpx;
		}
		
		.anchor-head {
			._t {
				color: #333;
				font-size: 24rpx;
				font-weight: 600;
			}
		}
		
		.list{
			width: 100%;
			white-space: nowrap;
			
			.item {
				width: 110rpx;
				margin-right: 60rpx;
				display: inline-block;
				padding-top: 20rpx;
				
				
				.img-wrap {
					position: relative;
					
					.status-mark{
						position: absolute;
						font-size: 24rpx;
						color: #fff;
						background-image: linear-gradient(to right, mix($base-color, #fff), $base-color);
						bottom: 0;
						z-index: 6;
						line-height: 1;
						padding: 4rpx 10rpx;
						border-radius: 24rpx;
						left: 50%;
						transform: translateX(-50%);
					}
					
					.anchor-img{
						width: 110rpx;
						height: 110rpx;
						border: 2px solid $base-color;
						border-radius: 50%;
						overflow: hidden;
						
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				
				.anchor-name{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					font-weight: 600;
					color: #999;
					line-height: 1;
					margin-top: 16rpx;
				}
			}
		}
	}
}

.body-wrap{
	margin-top: 20rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
	flex: 1;
	overflow: hidden;
	
	.tab-nav{
		
		.tab-item{
			height: 70rpx;
			line-height: 70rpx;
			display: inline-block;
			position: relative;
			margin-right: 60rpx;
			font-weight: 600;
			color: #999;
			
			&.curr{
				color: #333;
				
				&:after{
					content: '';
					width: 40rpx;
					height: 8rpx;
					border-radius: 16rpx;
					background: $base-color;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	
	.room-list{
		height: calc(100% - 70rpx);
		
		.room-item{
			margin-top: 30rpx;
			width: 100%;
			height: 230rpx;
			box-shadow: 0 -2px 8px 0 rgba(0,0,0,0.03),0 10px 5px 0 rgba(0,0,0,0.02);
			border-radius: 10rpx;
			display: flex;
			
			.room-img{
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				
				.play-back-shade{
					position: absolute;
					width: 230rpx;
					height: 230rpx;
					z-index: 10;
					border-radius: 10rpx;
					overflow: hidden;
					background: rgba(0,0,0,.3);
					top: 0;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.iconbofang{
						width: 50rpx;
						text-align: center;
						border-radius: 50%;
						display: inline-block;
						background: rgba(0,0,0,.3);
						color: #fff;
					}
				}
				
				& > image{
					width: 100%;
					height: 100%;
				}
				
				.status-mark{
					position: absolute;
					top: 16rpx;
					left: 16rpx;
					z-index: 5;					
					
					& > view {
						position: relative;
						height: 36rpx;
						padding-right: 20rpx;
						display: inline-block;
						border-radius: 36rpx;
						padding-left: 44rpx;
						background: rgba(0,0,0,.5);
						display: flex;
						align-items: center;
						
						image{
							position: absolute;
							height: 36rpx;
							width: 36rpx;
							top: 0;
							left: 0;
						}
						
						text{
							line-height: 1;
							font-size: 24rpx;
							color: #fff;
							display: inline-block;
						}
					}
				}
			}
			
			.room-data{
				flex: 1;
				padding: 10rpx 0 10rpx 20rpx;
				width: calc(100% - 230rpx);
				
				.room-name{
					font-weight: 600;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
				}
				
				.flex{
					width: 100%;
					overflow: hidden;
					// display: flex;
					
					& > view {
						width: 50%;
						height: 40rpx;
						// display: flex;
						// align-items: center;
						// flex: 1;
						display: inline-block;
						float: left;
					}
					
					.anchor-info{
						
						image{
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
							border-radius: 50%;
							overflow: hidden;
							float: left;
						}
						
						text{
							font-size: 24rpx;
							color: #999;
							display: inline-block;
							line-height: 40rpx;
							display: inline-block;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							max-width: calc(100% - 50rpx);
							float: left;
						}
					}
					
					.live-time{
						text-align: right;
						color: $base-color;
						font-size: 24rpx;
						justify-content: flex-end;
						flex-shrink: 0;
						
						.icontime{
							font-size: 28rpx;
							margin-right: 4rpx;
							line-height: 1;
						}
					}
				}
				
				.goods-wrap{
					margin-top: 20rpx;
					overflow: hidden;
					white-space: nowrap;
					
					.goods-item{
						width: 100rpx;
						height: 100rpx;
						display: inline-block;
						float: left;
						margin-right: 4rpx;
						
						navigator{
							width: 100rpx;
							height: 100rpx;
							display: block;
						}
						
						image{
							width: 100%;
							height: 100%;
						}
					}
					
					.more{
						display: inline-block;
						width: 100rpx;
						height: 100rpx;
						background: opacify($base-color-rgba, 0.1);
						float: left;
						
						view {
							color: $base-color;
							text-align: center;
							line-height: 1;
							font-size: 24rpx;
							
							&:first-child{
								padding-top: 20rpx;
							}
							
							&:last-child{
								margin-top: 10rpx;
							}
						}
					}
				}
			}
		}
	}
	
	.empty{
		
		image{
			width: 200rpx;
			height: 200rpx;
		}
	}
}